<template>
  <div style="position:relative;height:100%">
    <div class="home-img-container">
      <img
        src="../../../public/img/Home_long.jpg"
        class="home-img"
        alt="home-image"
      />
    </div>
    <div class="contact-now" style="">
      <div
        style="margin:0 auto;width:100%;padding:20px 0; max-width:1000px;display:flex;flex-wrap:wrap;justify-content:space-around"
      >
        <span style="color:white;line-height:40px">
          想要调整油田规划和制定方案?可以点击右侧与我们联系
        </span>
        <div
          style="background:rgb(50,168,204);height:36px;line-height:36px;padding: 0 10px;color:rgba(255,255,255,0.9);cursor:pointer"
          class="tartan-btn"
        >
          CONTACT NOW
        </div>
      </div>
    </div>
    <item-title :title="$t('productAndService')"></item-title>
    <div class="app-container">
      <p
        class="case-describe"
        style="font-size:16px;line-height:26px;font-weight:400;color:#50565B;"
      >
        达坦能源集团（Tartan Energy
        Group）创始于加拿大，拥有20多年油田钻完井技术研发、高端装备制造及油气田开发评价技术服务经验。
        集团专注于非常规油气资源的开发，为全球客户提供先进的井下装备、一体化解决方案和高端技术服务。
        凭借企业核心价值观，奋勇创新、完美表现和全面的服务，达坦将致力于成为全球非常规能源领域最重要的，最具有创新和真诚服务的公司。
      </p>
      <div
        style="width:100%;display:flex;flex-wrap:wrap;justify-content:space-between"
      >
        <div style="width:280px;text-align:center">
          <img width="100%" src="../../../public/img/product_1.png" alt="" />
          <tartan-btn style="width:248px;margin:16px 0">
            {{$t("MiningTech")}}
          </tartan-btn>
        </div>
        <div style="width:280px;text-align:center">
          <img width="100%" src="../../../public/img/product_2.png" alt="" />
          <tartan-btn style="width:248px;margin:16px 0">
            {{ $t('intelligentProCtrl') }}
          </tartan-btn>
        </div>
        <div style="width:280px;text-align:center">
          <img width="100%" src="../../../public/img/product_3.png" alt="" />
          <tartan-btn style="width:248px;margin:16px 0">{{$t('oilfield')}}</tartan-btn>
        </div>
        <div style="width:280px;text-align:center">
          <img width="100%" src="../../../public/img/product_4.png" alt="" />
          <tartan-btn style="width:248px;margin:16px 0">{{$t('photovoltaic')}}</tartan-btn>
        </div>
      </div>
    </div>

    <item-title :title="$t('home1.partner')"></item-title>
    <div class="app-container">
      <img style="width:100%" src="../../../public/img/Partners.png" alt="" />
    </div>
    <item-title :title="$t('home1.contactus')"></item-title>
    <div
      class="app-container"
      style="display:flex;flex-wrap:wrap;justify-content:space-around"
    >
      <img style="width:380px;" src="../../../public/img/loc_1.png" alt="" />
      <img style="width:380px;" src="../../../public/img/loc_2.png" alt="" />
      <img style="width:380px;" src="../../../public/img/loc_3.png" alt="" />
      <div style="width:380px;height:1px"></div>
      <div style="width:380px;height:1px"></div>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/topics";
import ItemTitle from "@/components/ItemTitle";
import TartanBtn from "@/components/TartanBtn";
export default {
  name: "HomePage",
  components: { ItemTitle, TartanBtn },
  asyncData() {},
  mounted() {},
  methods: {
    onlogin() {
      this.$message.success("hello");
      let form = new FormData();
      form.append("username", "admin");
      form.append("password", "admin");
      login(form);
    },
  },
};
</script>

<style lang="scss" scoped>
.home-img-container {
  height: 595px;
  width: 100%;
  position: relative;
  background-color: rgb(22, 41, 56);
  overflow: hidden;
  .home-img {
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.contact-now {
  background-color: rgb(1, 79, 127);
  // height: 90px;
}
</style>
